<script setup>
import {onMounted, reactive} from "vue";
import {getSwiperPic} from "@/request/api/home";

const state = reactive({
    images: []
});

onMounted(async () => {
    const res = await getSwiperPic(2);
    state.images = res.data.banners
})
</script>

<template>
    <!--懒加载-->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in state.images" :key="image">
            <img :src="image.pic" alt=""/>
        </van-swipe-item>
    </van-swipe>
</template>

<style lang="less">
.van-swipe {
    width: 100%;
    height: 3rem;

    .van-swipe-item {
        padding: 0 0.2rem;

        img {
            width: 100%;
            height: 100%;
            border-radius: 0.2rem;
        }
    }

    .van-swipe__indicator--active {
        background-color: #db8282
    }
}
</style>